<template>
  <div>
    <el-form-item>
      <el-select
        @change="changeSchoolType"
        v-model="schoolType"
        filterable
        clearable
        placeholder="请选择阶段">
        <el-option
          v-for="item in schoolTypeList"
          :key="item.id"
          :label="item.value"
          :value="item.code">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-select
        v-model="gradeType"
        filterable
        clearable
        placeholder="请选择年级">
        <el-option
          v-for="item in gradeTypeList"
          :key="item.id"
          :label="item.value"
          :value="item.code">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-select
        v-if="subjectList.length > 0"
        v-model="subjectId"
        filterable
        clearable
        placeholder="请选择科目">
        <el-option
          v-for="item in subjectList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
       <el-input v-model="keyWord" placeholder="输入题目内容" type="text"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button v-if="hasPermission([permission])" type="success" icon="el-icon-search" @click="searchQuestion" >搜索</el-button>
    </el-form-item>
  </div>
</template>

<script>
  import {getDictValueListByParentId} from '@/utils/system-dict-api'
  export default {
    name: 'educationSearch',
    props: {
      school_type_list: {
        type: Array,
        default: []
      },
      grade_type_list: {
        type: Array,
        default: []
      },
      permission: {
        type: String,
        default: ''
      }
    },

    mounted () {
        this.schoolTypeList = this.school_type_list
        this.gradeTypeList = this.grade_type_list
    },

    data () {
      return {
         schoolType: null,
         gradeType: null,
         subjectId: null,
         schoolTypeList: [],
         gradeTypeList: [],
         keyWord: '',
         subjectList: []
      }
    },

    watch: {
       'school_type_list' (val) {
          this.schoolTypeList = val
       },

       'grade_type_list' (val) {
          this.gradeTypeList = val
       },

       'gradeType' (val) {
           this.getSubjectList()
       }
    },

    methods: {

      getSubjectList () {
          this.axios.get(this.$http.httpUrl('/system/subject/list'), {
              params: {
                  schoolType: this.schoolType,
                  gradeType: this.gradeType
              }
          }).then(response => {
              this.subjectList = response.data.data.dataList
          })
      },

      // 选中阶段
      changeSchoolType (val) {
          let that = this
          if (that.gradeType) {
              that.gradeType = null
          }
          let parentId = null
          that.schoolTypeList.forEach(item => {
              if (val === item.code) {
                  parentId = item.id
              }
          })
          getDictValueListByParentId(parentId, 'grade_type', data => {
              that.gradeTypeList = data
          })
      },
/*
      changeGradeTypeApi (val) {
         // this.gradeType = val
          this.getSubjectList()
      },*/

      searchQuestion () {
        let form = {
          schoolType: this.schoolType,
          gradeType: this.gradeType,
          subjectId: this.subjectId,
          keyWord: this.keyWord
        }
        this.$emit('click', form)
      }
    }
  }
</script>
